<template>
  <div>
    <h1>axios发送的请求数据类型（有问题）</h1>
    相关资料：
    <p>https://wenku.baidu.com/view/9b239af01a5f312b3169a45177232f60ddcce737.html</p>
    <p>https://www.kancloud.cn/yunye/axios/234845</p>
    <p>https://wenku.baidu.com/view/c65a83414bd7c1c708a1284ac850ad02de800734.html</p>
    <p>https://wenku.baidu.com/view/f05f6288b3717fd5360cba1aa8114431b90d8e9a.html</p>
    <div class="part part-1">
      <h3>Payload类型（默认类型，也是json串类型）</h3>
      <div class="memo">
        <p>当form的action为get时，浏览器⽤x-www-form-urlencoded的编码⽅式，将表单数据编码为 (name1=value1&name2=value2…)，然后把这个字符串append到url后⾯，⽤?分隔，</p>
        <p>当form的action为post时，数据需要qs.stringify()处理，浏览器将form数据封装到http body中，然后发送到server。 这个格式不能提交⽂件。</p>
      </div>
      <button @click="http1">点击测试发送请求</button>
      <div class="content">
        代码：
        <pre>
          <code contenteditable="true">
            axios({
              method: 'post',
              url: 'http1',
              header: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: {
                name: 'clw',
                age: '18',
                type: 'human'
              }
            })
          </code>
        </pre>
        效果：
        <img src="./img/payload.png" class="block" alt="">
      </div>
    </div>
    <div class="part part-2">
      <h3>form-data类型</h3>
      <div class="memo">
        <p>form-data与x-www-form-urlencoded不同之处在于（multipart/form-data：既可以上传⽂件等⼆进制数据，也可以上传表单键值对，只是最后 会转化为⼀条信息；x-www-form-urlencoded：只能上传键值对，且键值对都是间隔分开。）</p>
      </div>
      <button @click="http2">点击测试发送请求</button>
      <div class="content">
        代码：
        <pre>
          <code contenteditable="true">
            axios({
              method: 'post',
              url: 'http2',
              header: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: qs.stringify({
                name: 'clw',
                age: '18',
                type: 'human'
              })
            })
          </code>
        </pre>
        效果：
        <img src="./img/form-data.png" class="block" alt="">
      </div>
    </div>
    <div class="part part-3">
      <h3>row类型</h3>
      <div class="memo">
        <p>可以上传任意格式的⽂本，可以上传text、json、xml、html、javascript等</p>
      </div>
      <button @click="http3">点击测试发送请求</button>
      <div class="content">
        代码：
        <pre>
          <code contenteditable="true">

          </code>
        </pre>
        效果：
      </div>
    </div>
    <div class="part part-4">
      <h3>binary类型</h3>
      <div class="memo">
        <p> 等同于Content-Type:application/octet-stream，只可上传⼆进制数据，通常⽤来上传⽂件，由于没有键值，所以⼀次只能上传⼀个⽂件。</p>
      </div>
      <button @click="http4">点击测试发送请求</button>
      <div class="content">
        代码：
        <pre>
          <code contenteditable="true">

          </code>
        </pre>
        效果：
      </div>
    </div>
  </div>

</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    name: "axios",
    data() {
      return {

      }
    },
    methods: {
      http1() {
        axios({
          method: 'post',
          url: 'http1',
          data: {
            name: 'clw',
            age: '18',
            type: 'human'
          }
        })
      },
      http2() {
        axios({
          method: 'post',
          url: 'http2',
          header: {
            'Content-Type': 'application/form-data'
          },
          params: {
            name: 'clw',
            age: '18',
            type: 'human'
          }
        })
      },
      http3() {},
      http4() {}
    }
  }
</script>

<style scoped>

</style>
